<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="ID" prop="id">
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="username">
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.adminUsername }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否启用" prop="isacticed">
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.isActived }}</span>
        </template>
      </el-table-column>

      <el-table-column label="注册时间" prop="registryDate">
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <table>
            <tr>
              <td>
                <el-button type="primary" size="mini" plain @click="AssignAdmin"
                  >分配管理员</el-button
                >
              </td>
              <!-- <td>
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入关键字搜索"
                />
              </td> -->
              <!-- <td>
                <el-button icon="el-icon-search" size="mini" circle></el-button>
              </td> -->
            </tr>
          </table>
        </template>
        <template #default="scope">
          <el-button
            size="mini"
            type="warning"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >

          <el-button
            size="mini"
            type="success"
            @click="handleEnable(scope.$index, scope.row)"
            >解封</el-button
          >

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >封号</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="用户名" label-width="120px">
          <el-input :value="formData.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px">
          <el-input v-model="formData.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  adminGetList,
  addAdmin,
  updateAdmin,
  disable,
  enableadmin,
} from "../../../api/index";
export default {
  data() {
    return {
      dialogFormVisible: false,
      tableData: [
        // {
        //   id: 1,
        //   username: "admin",
        //   registryDate: "2021-7-30",
        // },
      ],
      formData: {},
      currentIndex: 0,
      formLabelWidth: "100px",
      search: "",
    };
  },
  methods: {
    //删除(封号)
    handleDelete(index, row) {
      console.log(index, row);
      disable(row.id)
        .then((data) => {
          this.tableData.push(data.data);
          this.getlist();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //解封
    handleEnable(index, row) {
      console.log(index, row);
      enableadmin(row.id)
        .then((data) => {
          // console.log(data);
          this.tableData.push(data.data);
          this.getlist();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改
    handleEdit(index, row) {
      // console.log(index,row.id);
      this.formData.id = row.id;
      this.formData.username = row.adminUsername;
      this.currentIndex = index;
      this.dialogFormVisible = true;
    },
    //分配管理员
    AssignAdmin() {
      this.dialogFormVisible = true;
      this.formData.id = 0;
    },
    //取消
    handleCancel() {
      this.dialogFormVisible = false;
      this.formData.password="";
    },
    //确定
    handleSave() {
      if (this.formData.username && this.formData.password) {
        this.dialogFormVisible = false;
        if (this.formData.id === 0) {
          // 新增
          addAdmin(this.formData).then(({ data }) => {
            console.log(data);
            this.formData.username="";
            this.formData.password="";
            //重新刷新页面
            data.data.adminUsername=data.data.username
            console.log(data.data);
            this.tableData.push(data.data);
          });
        } else {
          var Username = this.formData.username;
          var Password = this.formData.password;
          // 修改
          updateAdmin(this.formData.id, {
            adminUsername: Username,
            adminPassword: Password,
          }).then(({ data }) => {
            this.formData.password="";
            console.log(data);
            this.getlist();
          });
        }
        console.log(this.formData.id);
      }else{
        alert("请输入用户名或密码");
      }
    },
    //刷新页面
    getlist() {
      //获取用户信息
      adminGetList()
        .then(({ data }) => {
          console.log(data);
          this.tableData = data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style>
</style>